<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<title>阿文vue学习</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<style>
		.class1{
		  background: #444;
		  color: #eee;
		}
		</style>
	</head>
	<body>
		<!-- v-bind指令用于给html标签设置属性。。 -->
		<!-- 以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类： -->
		<div id="app">
		  <label for="r11">修改颜色</label><input type="checkbox" v-model="use" id="r1">
		  <br><br>
		  <div v-bind:class="{'class1': use}">
		    v-bind:class 指令
		  </div>
		   <pre><a v-bind:href="url">百度</a></pre>
		</div>
		
		<script>
		new Vue({
		    el: '#app',
		  data:{
		      use: false,
			  url: 'http://www.baidu.com'
		  }
		});
		</script>
	</body>
</html>
